<template>
  <div class="page">
    <div class="banner">
      <img src="@/assets/img/flightsbg.svg">
        <div class="ticket"><b style="color: #03B1E6;">Ticket</b></div>
    </div>
  </div>
  <div class="wrapper">
    <div class="searchForm">
      <el-form v-model="params">
        <div class="searchRadio">
          <el-radio-group v-model="params.type">
            <el-radio size="large" border value="Flight">✈️Flight</el-radio>
            <el-radio size="large" border value="Cruise">🚢Cruise</el-radio>
            <el-radio size="large" border value="Bus">🚌Bus</el-radio>
            <el-radio size="large" border value="Train">🚄Train</el-radio>
          </el-radio-group>
        </div>
        <div class="searchInput">
          <el-form-item class="item-margin-right"><el-input :prefix-icon="TopRight" placeholder="From" v-model="params.departureLocation"></el-input>          </el-form-item>
          <el-form-item class="item-margin-right"><el-input :prefix-icon="BottomRight" placeholder="To" v-model="params.destination"></el-input>         </el-form-item>
          <el-form-item class="item-margin-right"><el-date-picker style="height: 40px;" type="date" placeholder="Departure Time" v-model="params.departureTime"></el-date-picker></el-form-item>
          <el-form-item class="item-margin-right"><el-date-picker style="height: 40px;" type="date" placeholder="Arrival Time" v-model="params.arrivalTime"></el-date-picker>  </el-form-item>
        </div>
        <div class="searchBtn">
          <el-button size="large" type="primary" :icon="Search" @click="Sea()"><b>Search</b></el-button>
          <el-button size="large" type="warning" @click="Res()"><b>Reset</b></el-button>
        </div>
      </el-form>
    </div>
  
    <div class="searchTable">
      <el-table :data="ticket" height="700px" >
        <el-table-column prop="type" label="Type" width="150" />
        <el-table-column prop="departureLocation" label="Departure_location" width="300"/>
        <el-table-column prop="destination" label="Destination" width="300" />
        <el-table-column label=" Departure Time" sortable width="250">
          <template #default="{row}">
              <span>{{ formatTime( row.departureTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="arrivalTime" label="Arrival_Time" width="250" >
          <template #default="{row}">
              <span>{{ formatTime( row.arrivalTime) }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="Price" sortable width="150" />
        <el-table-column prop="num" label="Num" width="150" />
        <el-table-column label="operation" width="150" fixed="right">
          <template #default="{row}">
              <el-button type="primary" size="large" @click="addToOrder(row)">Add</el-button>
          </template>
        </el-table-column>
      </el-table> 
      <el-pagination
        style="margin: 20px 0;"
        background
          v-model:current-page="params.pageNum"
          v-model:page-size="params.pageSize"
          :page-sizes="[20,40,60,80]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="onSizeChange"
          @current-change="onCurrentChange"
        />
    </div>
  
  </div>

</template>

<script setup>
import {BottomRight, TopRight, Search} from '@element-plus/icons-vue'
import request from "@/utils/request.js"
import { formatTime } from '@/utils/format'
import {ticketGetService}from "@/api/ticket.js"
import { ref,onMounted } from 'vue' 
const params = ref({
  pageNum: 1,
  pageSize: 20,
  departureLocation: "",
  destination: "",
  departureTime: "",
  arrivalTime: "",
  type:""

})
const total = ref(0)
const ticket =ref([])
async function getTickets (){
  const res=await ticketGetService(params.value)
  ticket.value = res.data.data.rows
  total.value = res.data.data.total
}
onMounted(()=>{
  getTickets()
})

const onSizeChange = (pageSize) => {
  params.value.pageNum = 1
  params.value.pageSize = pageSize
  getTickets()
}

const onCurrentChange = (pageNum) => {
  params.value.pageNum = pageNum
  getTickets()
}
function Sea(){
  if(params.value.departureTime){
    params.value.departureTime = formatTime(params.value.departureTime)
  }else if (params.value.arrivalTime){
    params.value.arrivalTime=formatTime(params.value.arrivalTime)
  }
  getTickets()
}
function Res(){
  params.value={}
  getTickets()
}
async function addToOrder(ticket){
  await request.post('/order/add', {
    goodType:"Ticket",
    goodId: ticket.id,
    goodName: ticket.departureLocation+' - '+formatTime(ticket.departureTime)+' ->'+ticket.destination+' - '+ formatTime(ticket.arrivalTime),
    price:ticket.price
  })
  ElMessage.success("Add a ticket successfully")
}

</script>
<style lang="less" scoped>

.ticket {
  font-size: 56px;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 64px;
  color: var(--te8f1ea4d4928be48);
  margin-top: 300px;
  display: inline-block;
  left: 0;
  position: absolute;
  right: 0;
  text-align: center;
}

.search-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px 20px;
    background-color: #4285f4;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 770px;
    text-align: center;
}

.search-btn:hover {
    background-color: #357ae8;
}

.input {
  text-align: center;
}


.el-form-item {
  height: 40px;
  margin-bottom: 0;
}

.searchForm {
  position: relative;
  margin: 20px auto;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
  width: 100%;
  height: 170px;
  background-color: white;
  box-shadow: 0 0 10px rgb(196, 196, 196);
  border-radius: 10px;}

  .searchRadio {
    text-align: left;
    
  }

  .searchInput {
    margin-top: 20px;
    display: flex;
  }
  .item-margin-right {
    margin-right: 20px;
  }
  .el-input {
    height: 40px;
  }

  .searchBtn {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%,0);
  }

.searchTable {
  margin-top: 50px;
}

</style>
